import { Button, Dropdown, Input, Layout, Menu, Typography } from 'antd';
import type { MenuProps } from 'antd';
import React from 'react';
import { WithTranslation, withTranslation } from 'react-i18next';
import { connect } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import { Dispatch } from 'redux';

import logo from '../../logo.svg';
import {
  addLanguageActionCreator,
  changeLanguageActionCreator
} from '../../redux/language/language-acitons';
import { LanguageState } from '../../redux/language/language-reducer';
import store, { RootState } from '../../redux/store';
import styles from './header.module.css';

interface State extends LanguageState {}
type MenuItem = Required<MenuProps>['items'][number];

const menuItems: MenuItem[] = [
  {
    label: '旅游首页',
    key: '1'
  },
  {
    label: '周末游',
    key: '2'
  },
  {
    label: '跟团游',
    key: '3'
  },
  {
    label: '周末游',
    key: '4'
  },
  {
    label: '跟团游',
    key: '5'
  },
  {
    label: '自由行',
    key: '6'
  },
  {
    label: '私家团',
    key: '7'
  },
  {
    label: '邮轮',
    key: '8'
  },
  {
    label: '酒店+景点',
    key: '9'
  },
  {
    label: '当地玩乐',
    key: '11'
  },
  {
    label: '主题游',
    key: '12'
  },
  {
    label: '定制游',
    key: '13'
  },
  {
    label: '游学',
    key: '14'
  },
  {
    label: '签证',
    key: '15'
  },
  {
    label: '企业游',
    key: '16'
  },
  {
    label: '高端游',
    key: '17'
  },
  {
    label: '爱玩户外',
    key: '18'
  },
  {
    label: '保险',
    key: '19'
  }
];

// 传递给props的值
const mapStateToProps = (state: RootState) => {
  // language languageList 会被注入到this.props中
  return {
    language: state.language.language,
    languageList: state.language.languageList
  };
};

// 数据操作
const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    changeLanguage: (code: 'zh' | 'en') => {
      const action = changeLanguageActionCreator(code);
      dispatch(action);
    },
    addLanguage: (name: string, code: string) => {
      const action = addLanguageActionCreator(name, code);
      dispatch(action);
    }
  };
};
type PropsType = RouteComponentProps & // react-router的路由类型
  WithTranslation & // i18n props类型
  ReturnType<typeof mapStateToProps> & // redux store 映射类型
  ReturnType<typeof mapDispatchToProps>; // redux dispatch 映射类型
class HeaderComponent extends React.Component<PropsType> {
  handleStoreChange = () => {
    const storeState = store.getState();
    this.setState({
      language: storeState.language.language,
      languageList: storeState.language.languageList
    });
  };
  // 切换语言
  menuClickHandler = (e) => {
    if (e.key === 'new') {
      const action = addLanguageActionCreator(`new_lang${Date.now()}`, `新语言${Date.now()}`);
      store.dispatch(action);
    } else {
      const action = changeLanguageActionCreator(e.key);
      store.dispatch(action);
    }
  };
  render() {
    const { history, t } = this.props;
    return (
      <div>
        <div className={styles['top-header']}>
          <div className={styles['inner']}>
            <div className={styles['inner-left']}>
              <div className={styles['inner-left-label']}>让旅游更幸福</div>
              <Dropdown
                placement="bottom"
                dropdownRender={() => (
                  <Menu onClick={this.menuClickHandler}>
                    {this.props.languageList.map((item) => {
                      return <Menu.Item key={item.code}>{item.name}</Menu.Item>;
                    })}
                    <Menu.Item key={'new'}>添加新语言</Menu.Item>
                  </Menu>
                )}
              >
                <Button>{this.props.language.language === 'zh' ? '中文' : 'English'}</Button>
              </Dropdown>
            </div>
            <Button.Group className={styles['button-group']}>
              <Button onClick={() => history.push('/signIn')}> {t('header.register')}</Button>
              <Button onClick={() => history.push('/register')}> {t('header.signin')}</Button>
            </Button.Group>
          </div>
        </div>
        <Layout.Header className={styles['main-header']}>
          <div>
            <img src={logo} alt="logo" className={styles['app-logo']} />
            <Typography.Title level={3} className={styles['title']}>
              React.旅游网
            </Typography.Title>
          </div>
          <Input.Search placeholder="Basic usage" className={styles['search-input']} />
        </Layout.Header>
        <Menu mode="horizontal" className={styles['main-menu']} items={menuItems} />;
      </div>
    );
  }
}

export const Header = connect(
  mapStateToProps,
  mapDispatchToProps
)(withTranslation()(withRouter(HeaderComponent)));
